@base-url: "";
@name : "/static/";
@version:"?dev_1.0_201903071630";
@totalWidth: 1200px;

@base-image-path:"/static/images";
@image-path:"@{base-image-path}/pages/";
@icon-path:"@{base-image-path}/icons/";
@base-font-size:12px;
@base-font-family: "webfont", "Microsoft YaHei", "微软雅黑", SimSun, "宋体", sans-serif;
@base-font-color:#333;
@night-font-color: rgba(255, 255, 255, .7);
@base-font-gray:#b7b7b7;
//字体颜色
@font-gray:#7f7f7f;
@font-secondary:#454545;
@font-switch:#6B6B6B;
@font-input:#B7B7B7;
@font-line:#D1D1D2;
@font-border:#E8E8E8;
@font-btn:#F5F5F5;
@color-for-label: rgba(185, 243, 237, .5);
@color-for-label-night: rgba(91, 191, 176, .3);
@color-for-like: #20c2b0;
@color-for-main: rgba(0, 195, 172, .75);
@color-red-flat: #f9564f;
@color-blue:#0d6efd;
@color-light-blue: #e3f2fd;
@color-red:#c81818;
@color-green:#1f935c;
@color-border:#eaecf0;
@bg-gray:#f2f3f1;
@title-color:#552b14;

@color-btn-open:#13ce66;
.break-all() {
  word-break:break-all;
  word-wrap:break-word;
}
.transform(@tan) {
  transform: @tan;
  -webkit-transform: @tan;
  -moz-transform: @tan;
}
.limit-text-overflow(@col:2) {
  overflow : hidden;
  text-overflow: ellipsis;
  display: box;
  display: -webkit-box;
  display: -moz-box;
  -webkit-line-clamp: @col;
  -moz-line-clamp: @col;
  -webkit-box-orient: vertical;
  -moz-box-orient: vertical;
}
.auto-center() {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}

.normal-link(@de:none,@color:inherit){
  &:hover,&:focus,&:visited,&:active{
    text-decoration: @de;
  }
}

.flex(@type:row,@align:space-around,@valign:center, @calign: center, @wrap:nowrap){
  display: -webkit-flex; /* Safari */
  display: flex;
  flex-direction: @type;
  flex-wrap: @wrap;
  justify-content: @align;
  align-items: @valign;
  align-content: @calign;
}
.inline-flex(@type:row,@align:space-around,@valign:center,@wrap:nowrap){
  display: -webkit-inline-flex; /* Safari */
  display: inline-flex;
  flex-direction: @type;
  flex-wrap: @wrap;
  justify-content: @align;
  align-items: @valign;
}
.alternate(){
  animation-direction:alternate;
  -webkit-animation-direction:alternate;
}
.clear-style(){
  border: 0;
  background: transparent;
  .boxshadow(none);
  appearance:none;
  -webkit-appearance:none; /* Safari 和 Chrome */
}

.background-image(@imgname){
  background-image:url("@{base-image-path}/@{imgname}");
}
.background-uri(@imgname){
  background-image:data-uri('images/@{imgname}');
}
.background-attr(@position:center center,@size:cover,@repeat:no-repeat){
  background-position: @position;
  background-size:@size;
  background-repeat: @repeat;
}

.round(@radius:5px){
  border-radius:@radius;
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
}
.boxshadow(@attr: 0 0 5px rgba(0,0,0,0.3)){
  box-shadow:@arguments;
  -moz-box-shadow:@arguments;
  -webkit-box-shadow:@arguments;
}
.box-sizing(@boxmodel) {
  -webkit-box-sizing: @boxmodel;
     -moz-box-sizing: @boxmodel;
          box-sizing: @boxmodel;
}
.textshadow(@right_left1:5px,@bottom_top1:5px,@text :5px,@tetx_color:#b6ebf7){
  text-shadow:@arguments;
}

.tran(@t :id 2s ease-in 0s){
  transition:@t;
  -moz-transition:@t;
  -o-transition:@t;
  -webkit-transition:@t;
}
.animation(@animation:1s ease-in-out 0s 1 alternate,@fill:both){
  animation: @animation;
  -webkit-animation: @animation;
  -moz-animation: @animation;
  -o-animation: @animation;
  -webkit-animation-fill-mode: @fill;
  animation-fill-mode: @fill;
}
.fixed(@left:auto,@top:auto,@right:auto,@bottom:auto,@width:100%,@height:99.99%,@index:1){
  position:fixed;
  left:@left;
  top:@top;
  right:@right;
  bottom:@bottom;
  width:@width;
  height:@height;
  z-index:@index;
}
.absolute(@left:auto,@top:auto,@right:auto,@bottom:auto,@width:100%,@height:99.99%,@index:1){
  position:absolute;
  left:@left;
  top:@top;
  right:@right;
  bottom:@bottom;
  width:@width;
  height:@height;
  z-index:@index;
}
.button-variant(@color; @background; @border) {
  color: @color;
  background-color: @background;
  border-color: @border;

  &:hover,
  &:focus,
  &.focus,
  &:active,
  &.active,
  .open > .dropdown-toggle& {
    color: @color;
    background-color: darken(@background, 10%);
        border-color: darken(@border, 12%);
  }
  &:active,
  &.active,
  .open > .dropdown-toggle& {
    background-image: none;
  }
  &.disabled,
  &[disabled],
  fieldset[disabled] & {
    &,
    &:hover,
    &:focus,
    &.focus,
    &:active,
    &.active {
      background-color: @background;
          border-color: @border;
    }
  }

  .badge {
    color: @background;
    background-color: @color;
  }
}

.button-size(@padding-vertical; @padding-horizontal; @font-size; @line-height; @border-radius) {
  padding: @padding-vertical @padding-horizontal;
  font-size: @font-size;
  line-height: @line-height;
  border-radius: @border-radius;
}
